<template>
  <div class="wrapper">
    <div @click="onFocus(1)" class="addBottomBorder">
      <div class="title">开始时间</div>
      <div class="val">{{this.startDate}}</div>
    </div>
    <div @click="onFocus(2)" class="addBottomBorder">
      <div class="title">结束时间</div>
      <div class="val">{{this.endDate}}</div>
    </div>
    <nut-datepicker
      :is-visible="isVisible"
      title="请选择日期时间"
      type="datetime"
      startDate="2000-11-10 12:08"
      endDate="2030-10-05 10:04"
      :defaultValue="defaultDate"
      @close="switchPicker('isVisible')"
      @choose="setChooseValue"
    ></nut-datepicker>
  </div>
</template>

<script>
export default {
  name: "TaskSearch",
  data() {
    return {
      startDate: "",
      endDate: "",
      isVisible: false,
      flag: 1,
      defaultDate: this.$moment(new Date().toString()).format(
        "YYYY-MM-DD HH:mm:ss"
      )
    };
  },
  methods: {
    switchPicker(param) {
      this[`${param}`] = !this[`${param}`];
    },
    setChooseValue(param) {
      //console.log(param);
      //this.datetime = param[5];
      if (this.flag == 1) {
        this.startDate = param[5];
      } else {
        this.endDate = param[5];
      }
    },
    onFocus(f) {
      // console.log(this.$moment(new Date().toString()).format('YYYY-MM-DD HH:mm:ss'));
      this.isVisible = true;
      this.flag = f;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
.wrapper /deep/ .nut-textinput input {
  width: 100%;
}
.addBottomBorder {
  border-bottom: 1px solid #eee;
  padding: 10px;
  overflow: hidden;
}
.title {
  float: left;
}
.val {
  float: right;
}
</style>
